<!--
    Local Native
    Copyright (C) 2018-2019  Yi Wang

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src='./sanitizer.js'></script>
    <script>let i18n = require('roddeh-i18n')</script>
    <script src='./locales/zh-CN.js'></script>
    <script src='./locales/en-US.js'></script>
    <link rel="stylesheet" href="assets/css/global.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" type="text/css" href="../node_modules/dc/dist/style/dc.css"/>
    <link rel="stylesheet" href="assets/css/chart.css">
    <link rel="stylesheet" href="assets/css/list.css">
  </head>
  <body>
    <nav>
      <header>
      <b>
        <a href="https://localnative.app" target="_blank">Local Native</a>
      </b>
      </header>

      <div id='save-input'>

        <div>
          <input type="checkbox" id='ssbify' name="ssbify" value="ssbify" class="hidden"> <label for="ssbify" id="label-ssbify" class="hidden">ssbify</label>
          <input type="checkbox" id='cb-public' name="public" value="public" class="hidden"> <label for="cb-public" id="label-public" class="hidden">public</label>

          <button class='hidden' id="ssb-sync-btn" title="ssb sync">
            ssb sync
          </button>


        </div>

        <input class='save-input hidden' id='title' type='text' placeholder='title'/>
        <input class='save-input hidden' id='url' type='text' placeholder='url'/>
        <input class='save-input hidden' id='tags-text' type='text' placeholder='type to add tags, enter to save, comma or space as tag seperator'/>
        <input class='save-input hidden' id='desc-text' type='text' placeholder='description'/>
      </div>

      <div class="demo-controls hidden">
        <button id="screenshot-btn">screenshot</button>
        <span id="screenshot-text"></span>
      </div>

      <div>
        <span id="label-language">Language</span>
        <select id='select-language'>
          <option value="en-US">en-US English - US</option>
          <option value="zh-CN">zh-CN 中文简体 - 大陆</option>
        </select>
      </div>

      <div>
        <div>
        <span id="label-sync">Sync Between Devices</span><br>
          <button id="sync-via-attach-btn" title="sync via attach file">
            sync via attach file
          </button>
        </div>
        <div>
          <span id="label-server">Server</span><br>
          <button id="start-server-btn" title="lan/wifi sync server">
              start server
          </button>
        </div>
        <div>
          <button id="stop-server-btn" title="stop server">
              stop server
          </button>
        </div>
        <div>
          <span id="label-client">Client</span><br>
          <button id="start-client-sync-btn" title="lan/wifi sync client">
              start client sync
          </button>
          <textarea class='' id='addr' placeholder='xxx.xxx.xxx.xxx:2345 [server address]:[port]'></textarea>
        </div>
      </div>

      <div>
        <div style="max-width:560px; font-size:smaller;">
          <div id='request-text' style="overflow:auto"></div>
          <div id='response-text' style="overflow:auto"></div>
        </div>
      </div>
    </nav>

    <section class="chart">
      <div class="container">
        <div id="ln-day-chart">
          <strong id="title-charts">Timeseries Charts</strong>
          <!-- <span class="reset" style="display: none;">range: <span class="filter"></span></span> -->
          <!-- <a class="reset" href="javascript:lnDayChart.filterAll();lnMonthChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> -->
          <div class="clearfix"></div>
        </div>
        <div id="ln-month-chart">
          <p><span id="select-range-prompt">select a time range to zoom in</span>:
          <span class="reset" style="display: none;"> <span class="filter"></span></span>
          </p>
        </div>
      </div>

      <div>
        <input id='search-text' type='text' placeholder='type to search'/>
        <button id="search-clear-btn" title="clear search term(s)">
          X
        </button>
        <button id="prev-btn"> prev </button>
        <button id="next-btn"> next </button>
        <span id="pagination-text">
          /
        </span>
      </div>
      <div>
        <div id='notes'></div>
      </div>
    </section>
    <section>
      <strong id="title-tags">Tags</strong>
      <span id="tags">
      </span>
    </section>
    <script>
      require('./renderer-process/renderer.js')
      require('./i18n.js')
      require('./renderer-process/screen-capturer.js')
    </script>
  </body>
</html>
